<template>
  <div>
    <el-container>
      <el-header>
        <span>工单编号:</span>
        <el-input class="input" v-model="form.num" placeholder="请输入"></el-input>
        <span>工单状态:</span>
        <el-autocomplete class="input" v-model="form.state" placeholder="请选择" suffix-icon="el-icon-arrow-down" :fetch-suggestions="querySearch"></el-autocomplete>
        <el-button @click="query" type="primary" icon="el-icon-search">查询</el-button>
      </el-header>
      <el-main>
        <div class="btnTwo">
          <el-button class="addBtn" icon="el-icon-circle-plus-outline">新建</el-button>
          <el-button class="configBtn">工单配置</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="code" label="序号"> </el-table-column>
          <el-table-column prop="taskCode" label="工单编号"> </el-table-column>
          <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
          <el-table-column prop="typeName" label="工单类型"> </el-table-column>
          <el-table-column prop="createType" label="工单方式"> </el-table-column>
          <el-table-column prop="statusName" label="工单状态"> </el-table-column>
          <el-table-column prop="userName" label="运营人员"> </el-table-column>
          <el-table-column prop="createTime" label="创建日期"> </el-table-column>
          <el-table-column prop="" label="操作">
            <template>
              <el-button type="text" size="medium">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <span>共{{ workOrder.totalCount }}条记录 第 {{ workOrder.pageIndex }}/{{ workOrder.totalPage }} 页</span>
        <div class="btnBottom">
          <el-button size="small" :disabled="upBtn" @click="upButn">上一页</el-button>
          <el-button size="small" :disabled="downBtn" @click="downButn">下一页</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getWorkState, getWorkOrder } from '@/api/workOrder'
export default {
  data () {
    return {
      form: {
        num: '',
        state: ''
      },
      taskSearch: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: false
      },
      workState: [],
      restaurants: [],
      tableData: [],
      workOrder: {}
    }
  },
  computed: {
    upBtn () { return this.taskSearch.pageIndex === 1 },
    downBtn () { return this.workOrder.totalPage === this.taskSearch.pageIndex }
  },
  methods: {
    querySearch (queryString, cb) {
      const restaurants = this.restaurants
      const results = restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    loadAll () {
      return this.workState
    },
    upButn () {
      this.taskSearch.pageIndex--
      this.tableData = []
      this.getWork()
    },
    downButn () {
      this.taskSearch.pageIndex++
      this.tableData = []
      this.getWork()
    },
    async getWork () {
      const workOrder = await getWorkOrder(this.taskSearch)
      this.workOrder = workOrder
      workOrder.currentPageRecords.forEach((item, index) => {
        this.tableData.push({
          code: workOrder.pageIndex * 10 - 9 + index,
          taskCode: item.taskCode,
          innerCode: item.innerCode,
          typeName: item.taskType.typeName,
          createType: item.createType === 0 ? '自动' : '手动',
          statusName: item.taskStatusTypeEntity.statusName,
          userName: item.userName,
          createTime: item.createTime.replace(/T/, ' ').replace(/-/g, '.')
        })
      })
    },
    query () {
      if (this.form.state !== '重置') {
        if (this.form.num) {
          this.$set(this.taskSearch, 'taskCode', this.form.num)
        } else if (this.form.state) {
          let state = 0
          if (this.form.state === '待办') {
            state = 1
          } else if (this.form.state === '进行') {
            state = 2
          } else if (this.form.state === '取消') {
            state = 3
          } else if (this.form.state === '完成') {
            state = 4
          } else {
            state = 0
          }
          this.$set(this.taskSearch, 'status', state)
        }
      } else {
        this.form.state = ''
      }
      this.tableData = []
      this.getWork()
    }
  },
  async created () {
    const workState = await getWorkState()
    workState.forEach((item) => {
      this.workState.push({ value: item.statusName })
    })
    this.workState.push({ value: '重置' })
    console.log(this.workState)
    this.getWork()
  },
  mounted () {
    this.restaurants = this.loadAll()
  }
}
</script>

<style lang="less" scoped>
.el-container {
  .el-header {
    display: flex;
    height: 64px;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
    padding-right: 450px;
    span {
      height: 64px;
      width: 200px;
      line-height: 64px;
      font-size: 14px;
      color: #606266;
    }
    .input {
      height: 34px;
      line-height: 34px;
      width: 600px;
      .el-input__inner {
        height: 36px;
      }
    }
    .el-button {
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      min-width: 80px;
      height: 36px;
      padding: 0;
      background-color: #5f84ff;
      border: none;
      margin-top: 3px;
      margin-left: 10px;
    }
  }
  .el-main {
    position: relative;
    padding: 20px 15px 19px 17px;
    background-color: #fff;
    width: 100%;
    height: 800px;
    .btnTwo {
      height: 50px;
      width: 200px;
      line-height: 30px;
    }
    .addBtn {
      background: linear-gradient(135deg, #ff7d43, #db3602) !important;
      border: none;
      color: #fff;
    }
    .configBtn {
      background-color: #fbf4f0 !important;
      border: none;
      color: #655b56 !important;
    }
    /deep/ .el-table__header-wrapper {
      height: 50px;
      line-height: 20px;
      th {
        background-color: RGB(243, 246, 251);
        color: rgb(102, 102, 102);
        font-weight: 410;
      }
    }
    >span {
      color: #dbdfe5 !important;
      height: 20px;
      line-height: 20px;
      position: absolute;
      bottom: 30px;
      left: 30px;
    }
    .btnBottom {
      height: 30px;
      width: 200px;
      line-height: 30px;
      margin-top: 20px;
      margin-left: 1370px;
      button {
        border-radius: 2px;
        background-color: #d5ddf8;
        margin-right: 20px;
      }
    }
  }
  /deep/ .el-table__cell {
    border: none;
  }
}
</style>
